<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>四川旅游学院--智能报修系统</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../resources/mobileOperator/css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../resources/mobileOperator/css/operator.css"/>
	</head>

	<body>
      <!-- 主页面标题 -->
    <header class="mui-bar mui-bar-nav">
      <a class="mui-pull-left" id="side_menu" style="margin-top: .5rem;">
      	<img style="width: 3rem;height: 3rem;" src="../../resources/mobileOperator/img/logo.png"/>
      </a>
      <h1 class="mui-title">智能报修系统</h1>
    </header>
         <!--底部选项卡开始-->
        <nav class="mui-bar mui-bar-tab short_bar">
	    <a id="defaultTab" class="mui-tab-item mui-active" href="notResolve.jsp">
	        <span class="mui-icon mui-icon-spinner mui-spin"></span>
	        <span class="mui-tab-label">待处理</span>
	         <span class="mui-badge mui-badge-danger"></span>
	    </a>
	    <a class="mui-tab-item" href="history.jsp">
	        <span class="mui-icon mui-icon-chat"></span>
	        <span class="mui-tab-label">已完成</span>
	    </a>
	    <a class="mui-tab-item" href="../../resources/mobileOperator/performance.jsp">
	        <span class="mui-icon mui-icon-download"></span>
	        <span class="mui-tab-label">我的业绩</span>
	    </a>
	</nav>
        <!--底部选项卡结束-->
        <div class="mui-content">

        </div>
        <script src="../../resources/mobileOperator/js/mui.min.js"></script>
        <script type="text/javascript">
            var main = null;
            var menu = null;
            var isInTransition = false;
            var showMenu = false;
            mui.init();
            mui.plusReady(function() {
                main = plus.webview.currentWebview();
                // 预加载侧滑页
                setTimeout(function() {
                    menu = mui.preload({
                        url: "side.jsp",
                        id: "side",
                        styles: {
                            left: 0,
                            width: "70%",
                            zindex: -1
                        },
                        show: {
                            aniShow: "none"
                        }
                    });
                }, 200);
                // 点击左上角图标展示侧滑窗口
                document.getElementById("side_menu").addEventListener("tap", function() {
                    if(showMenu) {
                        closeMenu();
                    } else {
                        openMenu();
                    }
                });
                main.addEventListener("maskClick", closeMenu);
            });

            // 展示侧滑页
            function openMenu() {
                if(isInTransition) {
                    return;
                }
                if(!showMenu) {
                    // 侧滑菜单处于隐藏状态，则立即显示出来
                    isInTransition = true;
                    menu.setStyle({
                        mask: "rgba(0,0,0,0)"
                    }); //menu设置透明遮罩防止点击
                    menu.show("slide-in-left", 0, function() {
                        //主窗体开始侧滑并显示遮罩
                        main.setStyle({
                            mask: "rgba(0,0,0,0.4)",
                            left: "70%",
                            transition: {
                                duration: 150
                            }
                        });
                        mui.later(function() {
                            isInTransition = false;
                            menu.setStyle({
                                mask: "none"
                            }); //移除menu的mask
                        }, 160);
                        showMenu = true;
                    });
                }
            }
            // 隐藏侧滑页
            function closeMenu() {
                if(isInTransition) {
                    return;
                }
                if(showMenu) {
                    /*
                     * 关闭遮罩
                     * 主窗体开始侧滑
                     */
                    isInTransition = true;
                    main.setStyle({
                        mask: "none",
                        left: "0",
                        transition: {
                            duration: 200
                        }
                    });
                    showMenu = false;
                    // 等动画结束后，隐藏菜单webview，节省资源；
                    mui.later(function() {
                        isInTransition = false;
                        menu.hide("slide-in-right");
                    }, 300);
                }
            }
            
//          底部tab切换开始
var subpages = ['notResolve.jsp', 'history.jsp', 'performance.jsp'];
		var subpage_style = {
			top:'64px',
			bottom: '64px'
		};
//		底部tab切换脚本开始
var aniShow = {};
		
		 //创建子页面，首个选项卡页面显示，其它均隐藏；
		mui.plusReady(function() {
			var self = plus.webview.currentWebview();
			for (var i = 0; i < subpages.length; i++) {
				var temp = {};
				var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
				if (i > 0) {
					sub.hide();
				}else{
					temp[subpages[i]] = "true";
					mui.extend(aniShow,temp);
				}
				self.append(sub);
			}
		});
		 //当前激活选项
		var activeTab = subpages[0];
		
		 //选项卡点击事件
		mui('.mui-bar-tab').on('tap', 'a', function(e) {
			var targetTab = this.getAttribute('href');
			if (targetTab == activeTab) {
				return;
			}
			//显示目标选项卡
			//若为iOS平台或非首次显示，则直接显示
			if(mui.os.ios||aniShow[targetTab]){
				plus.webview.show(targetTab);
			}else{
				//否则，使用fade-in动画，且保存变量
				var temp = {};
				temp[targetTab] = "true";
				mui.extend(aniShow,temp);
				plus.webview.show(targetTab,"fade-in",300);
			}
			//隐藏当前;
			plus.webview.hide(activeTab);
			//更改当前活跃的选项卡
			activeTab = targetTab;
		});
		 //自定义事件，模拟点击“首页选项卡”
		document.addEventListener('gohome', function() {
			var defaultTab = document.getElementById("defaultTab");
			//模拟首页点击
			mui.trigger(defaultTab, 'tap');
			//切换选项卡高亮
			var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
			if (defaultTab !== current) {
				current.classList.remove('mui-active');
				defaultTab.classList.add('mui-active');
			}
		});
//		底部tab切换脚本结束
        </script>
    </body>
</html>